<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件传值</title>
    <script src="scripts/jquery-3.4.1.min.js"></script>
    <script src="scripts/vue.js"></script>
</head>

<body>
    <div id="app">    
        <span>学校信息</span>    
        <ul>
            <!--从父组件传值到子组件-->     
            <!--静态属性-->       
            <school school-title='清华北大'></school>
            <!--动态属性-->       
            <school :school-title="'浙大'"></school>
            <school :school-title="schoolList[0]"></school>
            <!--循环传值组件-->       
            <school v-for="(item,index) in schoolList" @cschool="changeEvent" :index="index" :school-title="item" :key="'school'+index"></school>
        </ul>

        <h2>选中的学校是：{{chooseSchool}}</h2>

        <span>产品信息</span>
        <ul>
            <product-list v-for="(item,index) in proList" :product="item"></product-list>
        </ul>
    </div>

    <script>
        Vue.component('school',{
            props:['schoolTitle','index'],
            template:`<li>
                <h3><input type="checkbox" @change='checkEvent(schoolTitle)'> {{index+1}}、学校名称：{{schoolTitle}}</h3>
            </li>`,
            methods:{
                checkEvent:function(schoolTitle){
                    //想要将子元素的数据传递给父元素，需要自定义触发事件，实现数据的传值
                    //console.log(this.$emit)
                    this.$emit('cschool',schoolTitle)
                }
            }
        })

        Vue.component('product-list', {
            props:['product'],
            template: `<li>            
            <h3>产品名称：{{product.title}}</h3>
            <span>产品价格：{{product.price}}</span>
            <p>产品介绍：{{product.biref}}</p>
        </li>`
        })

        let app = new Vue({
            el: "#app",
            data: {
                schoolList:[
                    '红凤小学',
                    '石马小学',
                    '石马中学',
                    '文昌中学',
                    '实验中学',
                    '托普学院',
                    '西南科技大学'         
                ],
                chooseSchool:[],
                proList: [
                    {
                        id: 1,
                        title: '产品名称1',
                        price: '1',
                        biref: '描述1'
                    },
                    {
                        id: 1,
                        title: '产品名称2',
                        price: '20',
                        biref: '描述2'
                    },
                    {
                        id: 3,
                        title: '产品名称3',
                        price: '300',
                        biref: '描述3'
                    },
                    {
                        id: 4,
                        title: '产品名称4',
                        price: '40',
                        biref: '描述4'
                    }
                ]
            },
            methods: {
                changeEvent:function(schoolTitle){
                    this.chooseSchool+=schoolTitle+',';
                    console.log('触发学校选择事件')
                }
            }
        })
    </script>
</body>

</html>